<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css" />
 <script src="../../layui/layui.js"></script>
 <title>panel 面板</title>
</head>

<body>
 <div class="layui-container">
  <div class="layui-row layui-col-space5">
   <h3>常见面板</h3>
   <div class="layui-col-md6">
    <div class="layui-panel">
     <div style="padding: 30px;">一个面板</div>
    </div>
   </div>
   <div class="layui-col-md6">
    <div class="layui-panel">
     <div style="padding: 30px;">一个面板</div>
    </div>
   </div>
  </div>
  <div class="layui-row layui-col-space5">
   <h3>卡片面板</h3>
   <div class="layui-col-md6">
    <div class="layui-card">
     <div class="layui-card-header">卡片面板</div>
     <div class="layui-card-body">
      卡片式面板面板通常用于非白色背景色的主体内
      从而映衬出边框投影
     </div>
    </div>
   </div>
   <div class="layui-col-md6">
    <div class="layui-card">
     <div class="layui-card-header">卡片面板</div>
     <div class="layui-card-body">
      卡片式面板面板通常用于非白色背景色的主体内
      从而映衬出边框投影
     </div>
    </div>
   </div>
   <p>如果你的网页采用的是默认的白色背景，不建议使用卡片面板。</p>
  </div>
  <div class="layui-row layui-col-space15">
   <h3>折叠面板</h3>
   <p>通过对内容元素设置class为 layui-show 来选择性初始展开某一个面板，element 模块会自动呈现状态图标。</p>
   <div class="layui-col-md12">
    <div class="layui-collapse">
     <div class="layui-colla-item">
      <h2 class="layui-colla-title">杜甫</h2>
      <div class="layui-colla-content layui-show">
       杜甫（712年2月12日 [1] ～770年），字子美，自号少陵野老，唐代著名现实主义诗人，与李白合称“李杜”。出生于河南巩县，原籍湖北襄阳。 [2-3]
       为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”，杜甫也常被称为“老杜”
      </div>
     </div>
     <div class="layui-colla-item">
      <h2 class="layui-colla-title">李白</h2>
      <div class="layui-colla-content ">
       李白（701年—762年12月），字太白，号青莲居士，又号“谪仙人”，唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。北京大学教授李志敏评价：“李白之诗呼吸宇宙，出乎道；杜甫之诗德参天地，源于儒，皆至天人合一境界，故能出神入化。“
       [1] 《旧唐书》记载李白为山东人 [2] ；《新唐书》记载，李白为兴圣皇帝李暠九世孙，与李唐诸王同宗。其人爽朗大方，爱饮酒作诗，喜交友
      </div>
     </div>
     <div class="layui-colla-item">
      <h2 class="layui-colla-title">王维</h2>
      <div class="layui-colla-content ">
       王维（701年—761年），字摩诘，号摩诘居士。河东蒲州（今山西运城）人，祖籍山西祁县。唐朝诗人、画家。
       王维出身河东王氏，于唐玄宗开元九年（721年）中进士第，为太乐丞。历官右拾遗、监察御史、河西节度使判官。天宝年间，拜吏部郎中、给事中。安禄山攻陷长安时，被迫受伪职。长安收复后，被责授太子中允。唐肃宗乾元年间任尚书右丞，世称“王右丞”。
      </div>
     </div>
    </div>
   </div>
  </div>
  <div class="layui-row layui-col-space15">
   <h3>开启手风琴</h3>
   <p>在折叠面板的父容器设置属性 lay-accordion 来开启手风琴，那么在进行折叠操作时，始终只会展现当前的面板。</p>
   <div class="layui-collapse" lay-accordion lay-filter="accordion">
    <div class="layui-colla-item">
     <h2 class="layui-colla-title">杜甫</h2>
     <div class="layui-colla-content layui-show">
      杜甫（712年2月12日 [1] ～770年），字子美，自号少陵野老，唐代著名现实主义诗人，与李白合称“李杜”。出生于河南巩县，原籍湖北襄阳。 [2-3]
      为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”，杜甫也常被称为“老杜”
     </div>
    </div>
    <div class="layui-colla-item">
     <h2 class="layui-colla-title">李白</h2>
     <div class="layui-colla-content ">
      李白（701年—762年12月），字太白，号青莲居士，又号“谪仙人”，唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。北京大学教授李志敏评价：“李白之诗呼吸宇宙，出乎道；杜甫之诗德参天地，源于儒，皆至天人合一境界，故能出神入化。“
      [1] 《旧唐书》记载李白为山东人 [2] ；《新唐书》记载，李白为兴圣皇帝李暠九世孙，与李唐诸王同宗。其人爽朗大方，爱饮酒作诗，喜交友
     </div>
    </div>
    <div class="layui-colla-item">
     <h2 class="layui-colla-title">王维</h2>
     <div class="layui-colla-content ">
      王维（701年—761年），字摩诘，号摩诘居士。河东蒲州（今山西运城）人，祖籍山西祁县。唐朝诗人、画家。
      王维出身河东王氏，于唐玄宗开元九年（721年）中进士第，为太乐丞。历官右拾遗、监察御史、河西节度使判官。天宝年间，拜吏部郎中、给事中。安禄山攻陷长安时，被迫受伪职。长安收复后，被责授太子中允。唐肃宗乾元年间任尚书右丞，世称“王右丞”。
     </div>
    </div>
   </div>
  </div>
 </div>
 <script>
  layui.use(['form', 'layer', 'element'], function () {
   var foprm = layui.form,
    element = layui.element;
   element.render();

   element.on('collapse(accordion)', function (data) {
    console.log(data.show); //得到当前面板的展开状态，true或者false
    console.log(data.title); //得到当前点击面板的标题区域DOM对象
    console.log(data.content); //得到当前点击面板的内容区域DOM对象
   });

  });
 </script>
</body>

</html>